import React, { useEffect, useState } from "react";
import QueueAnim from "rc-queue-anim";
import '../styles/index.less';
import LazyLoad from 'react-lazyload';
import { Row, Col } from "antd";
import { ImageViewer } from 'antd-mobile';
import { enquireScreen } from 'enquire-js';

const Retail = ({ dataSource, ...props }) => {
  const [visible, setVisible] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  }, []);
  const { ...currentProps } = props;
  delete currentProps.dataSource;

  const goViewPic = () => {
    setVisible(true);
  }

  return (
    <div className="retail">
      <div {...currentProps} className="retail-banner">
        <QueueAnim
          key="QueueAnim"
          type={["bottom", "top"]}
          className='banner-text-wrapper'
          delay={200}
        >
          <p className="banner-title">智慧零售</p>
          <p className="banner-describe">
            基于“人”、“货”、“场”三要素，以大数据与人工智能为技术核心，结合企业自身发展需求，搭建“新零售”体系，实现从供应链、产品研发到市场营销全环节覆盖，为客户提供数智化战略蓝图，助力品牌升级转型。
          </p>
        </QueueAnim>
      </div>
      <div className='retail1-wrapper'>
        <div className="c-grid-layout">
          <div className='case-top'>
            <div>
              <span className='case-title'>行业痛点</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='case-list'>
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/itemIcon1.png'/>
                    <div>
                      <p className='title'>增长之痛</p>
                      <p className="subtitle">流量红利增长受限、增长困境有待破解</p>
                      <p className='desc'>当前互联网环境流量红利向上增长空间受限，平台获客成本高，企业经营及营销承压。在存量用户运营方面，商家缺乏有效手段和内容与客户建立长期的联系，难以提升客户复购率。</p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/itemIcon2.png'/>
                    <div>
                      <p className='title'>数据之痛</p>
                      <p className="subtitle">缺乏有效数据洞察手段，掣肘企业精细化运营</p>
                      <p className='desc'>零售企业面临一方数据采集难、二方数据质量差的困境，对于分销渠道复杂的零售品类，用户数据采集缺乏实时性与全面性，无法覆盖对实时性要求较高的经营指标。用户行为预测、营销策略制定更多依赖经验，数据决策智能程度不够。</p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/itemIcon3.png'/>
                    <div>
                      <p className='title'>管理之痛</p>
                      <p className="subtitle">管理成本高、渠道协同难</p>
                      <p className='desc'>零售企业渠道众多，缺乏对渠道赋能和管控的有效手段来保证统一的服务质量。不同渠道的营销和供应链都依赖于不同的体系，造成了不同渠道之间的竞争，增加了库存积压的风险。</p>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>

      <div className='retail2-wrapper'>
        <div className="c-grid-layout">
          <div className='case-top'>
            <div>
              <span className='case-title'>解决方案架构</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='pic'>
            <LazyLoad>
              {isMobile ? 
                <img onClick={goViewPic} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/smartRetail_h5.png'></img>:
                <img src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/retailSolution.png'></img>
              }
            </LazyLoad>
          </div>
        </div>
      </div>

      <div className='retail3-wrapper'>
        <div className="c-grid-layout">
          <div className='case-top'>
            <div>
              <span className='case-title'>方案优势</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='case-list'>
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <LazyLoad>
                      <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/retailList1.png'/>
                    </LazyLoad>
                    <p className='title'>消费者精准触达</p>
                    <p className='subtitle'>帮助企业以数字化营销工具，全场景触达消费者，汇聚全渠道数据，沉淀企业的私域流量池，为数据驱动精细化运营打下良好基础。</p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item item2'>
                    <LazyLoad>
                      <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/retailList3.png'/>
                    </LazyLoad>
                    <p className='title'>更全面的数据洞察</p>
                    <p className='subtitle'>充分利用整合数据进行智能决策与建模，实现大部分数据指标T+0实时呈现、千人千面智能推荐、用户行为预测、营销效果分析、动态销售预测等复杂功能，通过数据洞察指导零售企业精细化运营。</p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item item3'>
                    <LazyLoad>
                      <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/retailList2.png'/>
                    </LazyLoad>
                    <p className='title'>更高效的渠道管理</p>
                    <p className='subtitle'>跨渠道构建统一的会员管理、客户管理、积分体系、权益体系、营销活动管理与供应链管理体系，保障渠道协同，赋能门店增长。</p>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
      <ImageViewer
        image='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/smartRetail_h5.png'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  );
};

export default Retail;
